/**
 * title: Index Page
 * icon: message
 */

import { Row, Col } from 'antd';
import React, { useState, useCallback, useRef } from 'react';
import Left from './components/Left';
import Right from './components/Right';
import Center from './components/Center/index';

const MessageCenter = () => {
  const [sideVisible, setSideVisible] = useState(false);
  const [msgType, setMsgType] = useState(false);
  const [oRadiotype, setoRadiotype] = useState('unread');
  const leftRef = useRef();

  const leftItemClick = useCallback(val => {
    setMsgType(val);
  }, []);
  return (
    <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
      <Left onClick={leftItemClick} setoRadiotype={setoRadiotype} cRef={leftRef}/>
      {/* <Col span={sideVisible ? 15 : 24} style={!sideVisible ? { paddingRight: 32, paddingLeft: 379 } : {paddingLeft: 379}}></Col> */}
      <Col span={sideVisible ? 15 : 24} style={!sideVisible ? { paddingRight: 32, paddingLeft: 32 } : {paddingLeft: 32}}>
        {msgType && (
          <Center
            msgType={msgType}
            oRadiotype={oRadiotype}
            setoRadiotype={setoRadiotype}
            leftRef={leftRef}
            onMessageCLick={() => {
              setSideVisible(!sideVisible);
            }}
          />
        )}
      </Col>
      {sideVisible && (
        <Col span={9}>
          <Right />
        </Col>
      )}
    </Row>
  );
};

export default MessageCenter;
